<template>
  <view class="index">
    <!-- 搜素框 -->
    <top-search></top-search>
    <!-- <view class="search">
       <u-search
        placeholder="搜索"
        shape="square"
        :show-action="false"
      ></u-search>
    </view> -->
    <!-- 轮播图 -->
    <view>
      <u-swiper
        :list="list"
        keyName="image_src"
        indicator
        indicatorMode="line"
        circular
        height="340rpx"
      ></u-swiper>
    </view>
    <!-- 导航 -->
    <view class="nav">
      <navigator v-for="item in navs" :key="item.name">
        <u--image width="100%" mode="widthFix" :src="item.image_src"></u--image>
      </navigator>
    </view>
    <!-- 楼层 -->
    <view class="topshop">
      <view class="top" v-for="item1 in shopping" :key="item1.name">
        <!-- 标题 -->
        <view class="floor-title">
          <u--image
            width="100%"
            mode="widthFix"
            :src="item1.floor_title.image_src"
          ></u--image>
        </view>
        <!-- 内容 -->
        <view class="floor-content">
          <navigator
            v-for="(item2, index2) in item1.product_list"
            :key="item2.name"
          >
            <u--image
              v-if="index2 === 0"
              width="100%"
              mode="widthFix"
              :src="item2.image_src"
            >
            </u--image>
            <u--image
              v-else
              width="100%"
              height="188rpx"
              mode="scaleToFill"
              :src="item2.image_src"
            >
            </u--image>
          </navigator>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      navs: [],
      shopping: [],
    };
  },
  onLoad() {
    Promise.all([this.getlist(), this.getnavs(), this.getshooping()]);
  },
  methods: {
    async getlist() {
      const { message: list } = await uni.$u.http.get("/home/swiperdata");
      this.list = list;
    },

    // 导航数组
    async getnavs() {
      const { message: navs } = await uni.$u.http.get("/home/catitems");
      this.navs = navs;
    },

    // 热门
    async getshooping() {
      const { message: shopping } = await uni.$u.http.get("/home/floordata");
      this.shopping = shopping;
    },
  },
};
</script>

<style lang="scss">
.topshop {
  .floor-content {
    overflow: hidden;
    navigator {
      width: 232rpx;
      margin-left: 15rpx;
      float: left;

      &:nth-last-child(-n + 2) {
        margin-top: 15rpx;
      }
    }
  }
}
/* 
移动端页面  
自适应   屏幕越大 元素就越大  rpx vw 

将设计稿的大小设置为 375px
750rpx =  375px

1px = 2rpx

750rpx = 750px
1px 
 */
// .search {
//   padding: 10rpx;
//   background-color: #eb4450;
// }
.nav {
  display: flex;
  navigator {
    flex: 1;
    padding: 20rpx;
  }
}
</style>

